<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar, .tab.active {
				background-color: #18B2ED;
			}
			.titlebar h1, .tab.active label {
				font-weight: bold;
				color: white;
			}
			.titlebar a i, .titlebar a label {
				color: white;
			}
			.art_mid {
				top: 45px;
				bottom: 40px
			}

		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="sectionid" data-role="section" class="active">
				<header>
					<div class="titlebar" data-toggle="close">
						<a class="left" > <label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label> </a>
						<h1 class="text-center ">echarts性能测试</h2> <a class="right"> <i class="icon icon-menu-fill"></i> </a>
					</div>
				</header>
				<article id="article_main" data-role="article" data-transition="slide" class="active art_mid" >
					<div id="main" style="height:60%;" class="width-full"></div>
				</article>
				<footer>
					<ul class="menubar" style="line-height: 40px;">
						<li class="tab " data-role="tab" id="location" >
							<label class="text-center">定位</label>
						</li>
						<li class="tab " data-role="tab"  id="setStart" >
							<label class="text-center">起始位置</label>
						</li>
						<li class="tab " data-role="tab"  id="setEnd"  >
							<label class="text-center">终点位置</label>
						</li>
					</ul>
				</footer>
			</section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script src="../assets/bridge/agile.exmobi.js"></script>
		<script src="../assets/bridge/exmobi.js"></script>
		<script src="../assets/third/echarts/echarts.min.js"></script>
		<script>
			var isbridge = false
			$(document).on('plusready', function() {
				if (!isbridge) {
					isbridge = true
					//原生代码区
				}
			})
			$(function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				var data = [];
				var now = +new Date(1997, 9, 3);
				var oneDay = 24 * 3600 * 1000;
				var value = Math.random() * 1000;
				for (var i = 0; i < 3000; i++) {
					data.push(randomData());
				}

				option = {
					title : {
						text : '时间坐标轴'
					},
					tooltip : {
						trigger : 'axis',
						formatter : function(params) {
							params = params[0];
							var date = new Date(params.name);
							return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
						},
						axisPointer : {
							animation : false
						}
					},
					xAxis : {
						type : 'time',
						splitLine : {
							show : true
						}
					},
					yAxis : {
						type : 'value',
						boundaryGap : [0, '70%'],
						splitLine : {
							show : false
						}
					},
					series : [{
						name : '模拟数据',
						type : 'line',
						showSymbol : false,
						hoverAnimation : false,
						data : data
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);

				function randomData(){
					now = new Date(+now + oneDay);
					value = value + Math.random() * 20 - 10;
					return {
						name : now.toString(),
						value : [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value)]
					}
				}
			})

		</script>
	</body>
</html>